
<div class=" col-12 m-0 p-0 pb-5 mt-2"  >
    <div class="card text-danger">
        <div class="card-header">身份证生成器说明</div>
        <div class="card-body">
            身份证号码生成器是按身份证验证规则生成虚拟身份证号，非真实身份证，仅供测试使用，请勿用于非法用途。</br>
            为了号码更真实，虚拟的年月日有时间限制
        </div>
    </div>
</div>
<div class=" col-12  m-0 p-0 pb-5" >
    <div class="card">
        <div class="card-header">随机身份证号码生成</div>
        <div class="card-body">
            <div class="form-group row">
                <div class="row col-12 m-0 p-2">
                    <div class="col-12 m-0 p-2 col-sm-12 col-md-12	col-lg-1 col-xl-1 col-xxl-1 text-center select-city-birthday">
                        <label class="text-center ">城市</label>
                    </div>
                    <div class="col-12 m-0 p-2 col-sm-12	col-md-12	col-lg-2 col-xl-2 col-xxl-2">
                        <select name="select_sheng" id="select_sheng" class="form-control "  type="text"  >

                        </select>
                    </div>
                    <div class="col-12 m-0 p-2 col-sm-12	col-md-12	col-lg-3 col-xl-2 col-xxl-2">
                        <select name="select_shi" id="select_shi" class="form-control " type="text">

                        </select>
                    </div>
                    <div class="col-12 m-0 p-2 col-sm-12	col-md-12	col-lg-2 col-xl-2 col-xxl-2">
                        <select name="select_qu" id="select_qu" class="form-control " type="text">

                        </select>
                    </div>
                </div>
                <div class="row col-12 m-0 p-2">
                    <div class="col-12 m-0 p-2 col-sm-12 col-md-12	col-lg-1 col-xl-1 col-xxl-1 text-center select-city-birthday">
                        <label class="text-center control-label">出生年月</label>
                    </div>
                    <div class="col-6 m-0 p-2 col-sm-6	col-md-6	col-lg-1 col-xl-1 col-xxl-1">
                        <select name="select_year" id="select_year" class="form-control "  type="text">

                        </select>
                    </div>
                    <div class="col-6 m-0 p-2 col-sm-6 col-md-6	col-lg-1 col-xl-1 col-xxl-1 text-start select-city-birthday">
                        <label class="text-center control-label">年</label>
                    </div>
                    <div class="col-6 m-0 p-2 col-sm-6	col-md-6	col-lg-1 col-xl-1 col-xxl-1">
                        <select name="select_month" id="select_month" class="form-control " type="text">

                        </select>
                    </div>
                    <div class="col-6 m-0 p-2 col-sm-6 col-md-6	col-lg-1 col-xl-1 col-xxl-1 text-start select-city-birthday">
                        <label class="text-center control-label">月</label>
                    </div>
                    <div class="col-6 m-0 p-2 col-sm-6	col-md-6	col-lg-1 col-xl-1 col-xxl-1">
                        <select name="select_day" id="select_day" class="form-control " type="text">

                        </select>
                    </div>
                    <div class="col-6 m-0 p-2 col-sm-6 col-md-6	col-lg-1 col-xl-1 col-xxl-1 text-start select-city-birthday">
                        <label class="text-center control-label">日</label>
                    </div>
                </div>

                <div class="row col-12 m-0 p-2">
                    <div class="col-12 m-0 p-2 col-sm-12 col-md-12	col-lg-1 col-xl-1 col-xxl-1 text-center select-city-birthday">
                        <label class="text-center control-label">性别</label>
                    </div>
                    <div class="col-12 m-0 p-2 col-sm-12	col-md-12	col-lg-1 col-xl-1 col-xxl-1">
                        <select name="select_sex" id="select_sex" class="form-control "  type="text">
                            <option value="1" selected>男</option>
                            <option value="2">女</option>
                        </select>
                    </div>
                </div>
                <div class="row col-12 m-0 p-0 text-center">
                    <div class="row  m-0 p-0 text-center ">
                        <div class="col-12 m-0 p-0 col-sm-12	col-md-12	col-lg-5 col-xl-5 col-xxl-5 "></div>
                        <div class="col-12 m-0 p-2 col-sm-12	col-md-12	col-lg-2 col-xl-2 col-xxl-2 text-center ">
                            <button type="button" class="btn btn-primary" onclick="createCard()">生成身份证号</button>
                        </div>
                        <div class="col-12 m-0 p-0 col-sm-12	col-md-12	col-lg-5 col-xl-5 col-xxl-5 "></div>
                    </div>

                </div>
            </div>

        </div>
    </div>
</div>
<div class=" col-12  m-0 p-0 pb-5" >
    <div class="card">
        <div class="card-header">生成结果</div>
        <div class="card-body  m-0 p-0 ">
            <div class="row  m-0 p-0 text-center select-city-birthday">

                <div class="row  m-0 p-0 text-center control-card" style="display: none;">
                    <div class="col-12 m-0 p-0 col-sm-12	col-md-12	col-lg-3 col-xl-3 col-xxl-3 "></div>
                    <div class="col-12 m-0 p-2 col-sm-12	col-md-12	col-lg-6 col-xl-6 col-xxl-6 text-center border-bottom">
                        <label class="text-center control-card1 "></label>
                    </div>
                    <div class="col-12 m-0 p-0 col-sm-12	col-md-12	col-lg-3 col-xl-3 col-xxl-3 "></div>
                </div>

                <div class="row  m-0 p-0 text-center control-card" style="display: none;">
                    <div class="col-12 m-0 p-0 col-sm-12	col-md-12	col-lg-3 col-xl-3 col-xxl-3 "></div>
                    <div class="col-12 m-0 p-2 col-sm-12	col-md-12	col-lg-6 col-xl-6 col-xxl-6 text-center border-bottom">
                        <label class="text-center control-card2 "></label>
                    </div>
                    <div class="col-12 m-0 p-0 col-sm-12	col-md-12	col-lg-3 col-xl-3 col-xxl-3 "></div>
                </div>
                <div class="row  m-0 p-0 text-center control-card" style="display: none;">
                    <div class="col-12 m-0 p-0 col-sm-12	col-md-12	col-lg-3 col-xl-3 col-xxl-3 "></div>
                    <div class="col-12 m-0 p-2 col-sm-12	col-md-12	col-lg-6 col-xl-6 col-xxl-6 text-center border-bottom">
                        <label class="text-center control-card3 "></label>
                    </div>
                    <div class="col-12 m-0 p-0 col-sm-12	col-md-12	col-lg-3 col-xl-3 col-xxl-3 "></div>
                </div>
                <div class="row  m-0 p-0 text-center control-card" style="display: none;">
                    <div class="col-12 m-0 p-0 col-sm-12	col-md-12	col-lg-3 col-xl-3 col-xxl-3 "></div>
                    <div class="col-12 m-0 p-2 col-sm-12	col-md-12	col-lg-6 col-xl-6 col-xxl-6 text-center border-bottom">
                        <label class="text-center control-card4 "></label>
                    </div>
                    <div class="col-12 m-0 p-0 col-sm-12	col-md-12	col-lg-3 col-xl-3 col-xxl-3 "></div>
                </div>
                <div class="row  m-0 p-0 text-center control-card" style="display: none;">
                    <div class="col-12 m-0 p-0 col-sm-12	col-md-12	col-lg-3 col-xl-3 col-xxl-3 "></div>
                    <div class="col-12 m-0 p-2 col-sm-12	col-md-12	col-lg-6 col-xl-6 col-xxl-6 text-center border-bottom">
                        <label class="text-center control-card5 "></label>
                    </div>
                    <div class="col-12 m-0 p-0 col-sm-12	col-md-12	col-lg-3 col-xl-3 col-xxl-3 "></div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .select-city-birthday{
        /*flex 布局*/
        display: flex;
        /*实现垂直居中*/
        align-items: center;
    }


</style>

<script type="application/javascript" src="/static/tool/cardTool.js"></script>
